<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <style>
        .box1 {
            width: 60%;
            border: 1px solid darkorchid;
            border-radius: 10px;
            padding: 20px;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2> {{title}} </h2>
        <Head-one></Head-one>
        <hr>

        <Home :title="title" msg="wh2110 -  YYDS">
            <template #demo>
                <div>
                    <h2>Hello World </h2>
                    <h1>2110 - 天道酬勤 </h1>
                </div>
            </template>
            <template #content>
                <div>
                    <h2>Banner - 轮播 </h2>
                    <h1>menu - 菜单 </h1>
                </div>
            </template>

            <template v-slot:head>
                <Head-one></Head-one>
            </template>
        </Home>

        <User></User>
        <User>
            <template #default="scope">
                <div class="box1">
                    我的年纪: {{scope.info.age}}
                </div>
            </template>
        </User>

        <User>
            <template #default="scope">
                <div class="box1">
                    我的word: {{scope.info.word}}
                </div>
            </template>
        </User>
    </div>


    <template id="home">
        <div>
            <h3>Home- HOme - home </h3>
            <p>WH2110 - Daydayup</p>
            <p>props -- {{msg}} -- {{title}}</p>
            <div class="box1">
                <slot name="head"></slot>
            </div>

            <div class="box1">
                <slot name="demo"></slot>
            </div>
            <div class="box1">
                <slot name="content"></slot>
            </div>
        </div>
    </template>

    <template id="user">
        <div>
            <h2>User - User - 用户中心</h2>
            <slot :info="info">
                我的名字: {{info.username}}
            </slot>
        </div>
    </template>
</body>
<script>
    const head = {
        template: "<h2>Head - Head - WH2110-daydayup</h2>"
    }
    Vue.component("HeadOne", head)


    Vue.component("Home", {
        template: "#home",
        props: ['msg', 'title']
    })

    Vue.component("User", {
        template: "#user",
        data() {
            return {
                info: {
                    username: "zhansan",
                    age: 19,
                    word: "人人过万"

                }
            }
        }
    })

    const vm = new Vue({
        data: {
            title: "Vue 组件插槽     ",
            word: 'wh2110-daydayup',

        },
        mounted() {
            document.getElementsByTagName("title")[0].innerHTML = this.title;
        }
    }).$mount("#app")
</script>

<!-- 
    Vue 实现了一套内容分发的API slot 将<slot> 元素作为承载分发内容的出口
    插槽 slot 专门接受 从父组件传递来的（props+slot） html 模板  内容分发
    
    父组件给子组件传递数据 props
    父组件 想给子组件 传递 模板（html标签） 用slot 来接受 内容分发 模块
    slot 父组件可以把模板标签 动态分发子组件 子组件放到指定的位置区域（slot插槽）

    具名插槽 slot 精准投放 定位  name=“a”
    template v-slot = “a”

    作用域插槽  把子组件的数据通过插槽传递给父组件 由父组件决定显示什么数据

    以后封装组件    props 70%  slot  30%



 -->

</html>